/* 头部 */
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background: #080031;
    padding: 4rem 0 12rem 0;
    flex-wrap: wrap;
    position: relative;
}

.top {
    margin: 0 auto;
    padding-bottom: 10rem;
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.top .leftsup {
    text-align: right;
    width: 100%;
    height: 6rem;
}

.header .top .left {
    width: 5rem;
    height: 5rem;
}

.header .top .left img {
    width: 100%;
    height: 100%;
}

.header .top .right {
    width: 75%;
}

.header .top .right input {
    background: #fff url(../images/search.png) no-repeat 3% center;
    background-size: 5%;
    height: 5rem;
    width: 100%;
    border-radius: 5rem;
    text-indent: 5rem;
    font-size: 2.5rem;
    font-size: #ccc;
}

/* .header .top .right input::before {
    content: "";
    background-image: url(../images/shopping1.png);
    width: 3rem;
    height: 3rem;
    background: red;
    border: 1px solid blueviolet;
} */
.bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.text {
    width: 40%;
}

.text .text1 {
    font-size: 5rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding-bottom: 1.5rem;
}

.text2 {
    border: 1px solid #fff;
}

.text .text2-1 {
    font-size: 3rem;
    font-weight: bold;
    color: #1c3994;
    background: #fff;
    text-align: center;
    letter-spacing: 4px;
    margin: .6rem;
}

.bg {
    width: 40%;
}

.bg img {
    width: 100%;
    height: 100%;
}

/* 付款 */
.payment {
    border-radius: 3rem;
    padding: 3rem 0;
    background: #fff;
    bottom: -32%;
    left: 5%;
    position: absolute;
    width: 90%;
    display: flex;
    margin: 0 auto;
    /* background: red; */
    flex-wrap: wrap;
}

.payment .img {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 2rem 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2rem;
}

.payment .img .img1 {
    text-align: center;
    width: 25%;

}

.payment .img .img1 img {
    width: 40%;
}

.payment .img .img1 .img1-1 {
    margin-bottom: 1rem;
}

.payment .img .img1 span {
    font-size: 2.4rem;
}

.payment .text {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.payment .text div {
    width: 25%;
    text-align: center;
    font-size: 2.4rem;
    padding: .2rem;
    border-right: 1px solid #ccc;
}

.payment .text div:nth-last-child(1) {
    border: none;
}

.payment .text div:nth-child(3) {
    background: url(../images/payment5.png) no-repeat 90% center;
    background-size: 15%;
}

/* f6f6f6 */

.f6f6f6 {
    padding: 21rem 0 15rem 0;

    background: #f6f6f6;
    margin-top: 1rem;

}

/* app */
.app {
    flex-wrap: wrap;
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}

.app1 {
    padding-bottom: 3rem;
    text-align: center;
    width: 20%;
}

.app .app1 .img {
    width: 100%;
    padding-bottom: 1rem;
}

.app .app1 .img img {
    width: 80%;
}

.app .app1 .text {
    width: 100%;
    font-size: 2.4rem;

}

/* 了解详情 */
.particulars {
    width: 95%;
    height: 13rem;
    background-image: url(../images/particulars-bg.png);
    border-radius: 20rem;
    margin: 0 auto;
    background-size: 100% 100%;
    margin-bottom: 4rem;
}

.particulars .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.particulars .box .left {
    width: 48%;
    text-align: center;
}

.particulars .box .left div {
    font-size: 4rem;
    color: #fff;
    padding-bottom: 1rem;
    letter-spacing: 1rem;
}

.particulars .box .left button {
    font-size: 1.4rem;
    color: #32386c;
    width: 14rem;
    height: 4rem;
    background: #fbf159;
    font-weight: bold;
    border-radius: 4rem;
}

.particulars .box .right {
    width: 48%;
    height: 100%;
    background-image: url(../images/index-bg-img.png);
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* transform: scale(1.4); */
}

/* 热门活动 */
.activity {
    width: 90%;
    margin: 0 auto;
}

.activity .box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.activity .box .title {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3rem;
}

.activity .box .title div {
    font-size: 3.5rem;
    color: #666666;
    font-weight: 400;
}

.activity .box .content {
    width: 48%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ececec;
    border-radius: 1rem;
    height: 15em;
    margin-bottom: 3rem;
}

.activity .box .content .text {
    width: 60%;
}

.activity .box .content .text div {
    font-size: 3.5rem;
    color: #333333;
    text-indent: 2.2rem;
    margin-bottom: 1.5rem;
}

.activity .box .content .text span {
    display: inline-block;
    font-size: 2.5rem;
    color: #999999;
    text-indent: 2.2rem;
}

.activity .box .content .img {
    width: 40%;
    text-align: center;
}

.activity .box .content .img img {
    width: 50%;
}

/* 爱上生活 */
.live {
    width: 90%;
    margin: 0 auto;
}

.live .box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.live .box .title {
    width: 100%;
    font-size: 3rem;
    padding-bottom: 2rem;
    text-indent: 2rem;
}

.live .box .center {
    width: 100%;
    background-image: url(../images/live.png);
    background-size: 100% 100%;
    padding: 3rem 0;
    text-indent: 4rem;
}

.live .box .center .left {
    width: 70%;
}

.live .box .center .left .text {
    width: 100%;
    color: #bd6b2e;
    font-size: 3rem;
    padding-bottom: 1rem;
}

.live .box .center .left button {
    color: #fff;
    background: #bd6b2e;
    font-size: 1.5rem;
    padding: 1rem;
    border: 0;
    margin-left: 4rem;
}

.live .box .center .right {
    width: 30%;
}

.live .box .bottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.live .box .bottom .bottom1 {
    width: 33%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3rem;
    border-right: 1px solid #e2e2e2;

}

.live .box .bottom .bottom1 .left {
    width: 30%;
    text-align: right;
}

.live .box .bottom .bottom1 .right {
    width: 70%;
    text-indent: 2rem;


}

.live .box .bottom .bottom1 .right div:nth-child(1) {
    color: #333333;
    font-size: 2rem;
}

.live .box .bottom .bottom1 .right div:nth-child(2) {
    color: #999999;
    font-size: 1.5rem;
}

/* 周边生活 */

.circum {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.circum .box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.circum .box .title {
    font-size: 3rem;
    width: 100%;
    color: #404040;
    padding: 2rem 0;
    text-indent: 3rem;
}

.circum .box .content {
    background: #fff;
    width: 100%;
    padding: 2rem 0;
    border-radius: 2rem;
    box-shadow: 0 0 .4rem #ccc;
}

.circum .box .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0;
}

.circum .box .content .left {
    width: 30%;
    text-align: center;
}

.circum .box .content .left img {
    width: 80%;
}

.circum .box .content .right {
    width: 70%;
}

.circum .box .content .right div:nth-child(1) {
    font-size: 3.5rem;
    padding: 1rem 0;
    color: #333333;
}

.circum .box .content .right div:nth-child(2) {
    color: #666666;
    padding: 1rem 0;
    font-size: 2rem;
}

.circum .box .content .right div:nth-child(2) span:nth-child(1) {
    display: block;
    border-right: 1px solid #ccc;
    padding-right: 1rem;
    font-size: 2rem;

}

.circum .box .content .right div:nth-child(2) span:nth-child(2) {

    padding-left: 1rem;

}

.circum .box .content .right div:nth-child(3) {
    padding: 1rem 0;
    color: #000;
    font-weight: 700;
    font-size: 2rem;
}

@media screen and (max-width:500px) {
    .activity .box .content {
        width: 100%;
    }

    .live .box .bottom {
        display: none;
    }
}